<template>
	<view class="image-list">
		<view v-for="image in images" :key="image.id" class="image-item">
			<image :src="image.src" alt="" class="image" @tap="previewImage(image.src)" />
			<view class="image-title">{{ image.title }}</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

const emit = defineEmits(['click'])

const props = defineProps({
	images: {
		type: Array,
		required: true
	}
})

const previewImage = url => {
	uni.previewImage({
		urls: [url]
	})
}
</script>

<style scoped>
.image-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.image-item {
	margin-bottom: 20px;
	width: calc(50% - 10px);
	box-sizing: border-box;
	padding: 0 10px;
}

.image {
	width: 100%;
	height: auto;
}

.image-title {
	margin-top: 10px;
	font-size: 16px;
	text-align: center;
}
</style>
